<template>
  <div>
    <Title2 title="毕业生薪资分布"></Title2>
    <div class="right_item">
      <MyEearts :option="option"></MyEearts>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import Title2 from '../commont/Title2.vue'
import MyEearts from '../commont/MyEearts.vue'
import { getmoney } from '../../request/index'
let option = ref({
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b}: {c}人'
  },
  legend: {
    textStyle: {
      color: '#fff'
    },
    data: ['30k', '20k~30k', '15k~20k', '10k~15k', '10k及以下']
  },
  series: [
    {
      name: '人数',
      type: 'funnel',
      left: '10%',
      width: '50%',
      label: {
        formatter: '{b}: {c}人'
      },
      labelLine: {
        show: false
      },
      emphasis: {
        label: {
          position: 'inside',
          formatter: '{b}: {c}人'
        }
      },
      data: [
        {
          value: 60,
          name: '30k',
          label: {
            position: 'right', // 标签在外侧显示
            formatter: '{b}: {c}人'
          }
        },
        { value: 40, name: '20k~30k' },
        { value: 20, name: '15k~20k' },
        { value: 50, name: '10k~15k' },
        { value: 100, name: '10k及以下' }
      ]
    },
    {
      name: '薪资',
      type: 'funnel',
      left: '10%',
      width: '50%',
      maxSize: '80%',
      label: {
        position: 'inside',
        formatter: '{c}%',
        color: '#fff'
      },
      itemStyle: {
        opacity: 0.5,
        borderColor: '#fff',
        borderWidth: 0
      },
      emphasis: {
        label: {
          position: 'inside',
          formatter: '{b}'
        }
      },
      data: [
        { value: 30, name: '30k' },
        { value: 10, name: '20k~30k' },
        { value: 5, name: '15k~20k' },
        { value: 50, name: '10k~15k' },
        { value: 80, name: '10k及以下' }
      ],
      // Ensure outer shape will not be over inner shape when hover.
      z: 100
    }
  ]
})
//薪资区间
const qu = [
  { name: '30k', min: 30000, max: Infinity },
  { name: '20k~30k', min: 20000, max: 30000 },
  { name: '15k~20k', min: 15000, max: 20000 },
  { name: '10k~15k', min: 10000, max: 15000 },
  { name: '10k及以下', min: -Infinity, max: 10000 }
]
onMounted(() => {
  getmoney().then((res) => {
    console.log(res, '薪资')
    //计算各个之间的人数 返回option里面的data;
    option.value.series[0].data = qu.map((item, index) => {
      const total = res.data.data.result.reduce((a, b) => {
        return b.salary >= item.min && b.salary <= item.max ? a + b.total : a
      }, 0)
      return { value: total, name: item.name }
    })
    option.value.series[1].data = qu.map((item, index) => {
      const total = res.data.data.result.reduce((a, b) => {
        return b.salary >= item.min && b.salary <= item.max ? a + b.total : a
      }, 0)
      return { value: total, name: item.name }
    })
  })
})
</script>

<style scoped lang='scss'>
.right_item {
  margin-top: 10px;
  width: 100%;
  height: 410px;
  background: #0c1d5f;
}
</style>